<template>
    <view>
        <div class="top">
            <div class="top_button">
                <div class="return" @click="returnPage">
                    <image :src="imageBaseUrl + '/img/return.png'"></image>
                </div>
                <div class="line"></div>
                <div class="homepage" @click="goHome">
                    <image :src="imageBaseUrl + '/img/home.png'"></image>
                </div>
            </div>
            <div>中奖记录</div>
        </div>
        <div class="content">
            <div class="title">中奖记录</div>
            <div class="tables">
				<div class="table_item">
					<div class="table_item_text" style="width: 10%;">序号</div>
					<div class="table_item_text" style="width: 25%;">昵称</div>
					<div class="table_item_text" style="width: 30%;">奖品</div>
					<div class="table_item_text" style="width: 35%;">时间</div>
				</div>
				<div class="table_items">
                <div v-for="(item, index) in records" :key="index" style="display: flex;">
                <div class="table_item_text" style="width: 10%;">{{ index + 1 }}</div>
					<div class="table_item_text" style="width: 25%;">{{ item.nickname }}</div>
					<div class="table_item_text" style="width: 30%;">{{ item.name }}</div>
					<div class="table_item_text" style="width: 35%;">{{ item.create_time }}</div>
                </div>
					
				</div>
			</div>
        </div>
    </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import api from '../../api/activity/index.js';
import config from '../../config/index.js';
const imageBaseUrl = config.image;//图片地址
const records = ref([]);//中奖信息
const data = ref({});//用户信息
onMounted(() => {
    data.value = uni.getStorageSync('user');//用户信息
    api.activity({
		user_id: uni.getStorageSync('token').id,
	}).then((res) => {
		console.log(res.data);
		records.value = res.data;
	});
})
// 返回
const returnPage = () => {
    uni.navigateBack({
        delta: 1
    });
};

// 主页
const goHome = () => {
    uni.navigateTo({
        url: '/pages/home/home'
    });
};
</script>

<style>
.table_item_text {
	text-align: center;
	line-height: 40px;
}

.table_item {
	display: flex;
	width: 100%;
	height: 40px;

}

.table_items {
	width: 100%;
	height: 730px;
	overflow-y: auto;
}

.end {
	width: 40%;
	height: 30px;
}

.more_img image {
	width: 20px;
	height: 20px;
}

.more {
	display: flex;
	color: #535353;
	margin-top: 27px;
	margin-left: 80%;
}

.tables {
	width: 88%;
	margin-left: 6%;
	margin-top: 10px;
	height: 270px;
	font-size: 14px;
	color: #424242;
}
.title {
    font-size: 20px;
    color: #636262;
    font-weight: 600;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.content {
    width: 100%;
    height: 100vh;
    background-color: #FFF0EB;
}

.line {
    width: 1%;
    background-color: #8a8a8a;
    height: 70%;
    margin-top: 5%;
}

.return {
    width: 49.5%;
    height: 100%;
    text-align: center;
    line-height: 25px;
}

.return image {
    width: 20px;
    margin-top: 2px;
    height: 20px;
}

.homepage {
    width: 49.5%;
    height: 100%;
    text-align: center;
    line-height: 25px;
}

.homepage image {
    width: 18px;
    margin-top: 3px;
    height: 18px;
}

.top_button {
    width: 70px;
    height: 25px;
    display: flex;
    border-radius: 15px;
    /* margin-top: 30px; */
    margin-left: 20px;
    margin-right: 18%;
    border: 1px solid rgb(192, 192, 192);
}

.top {
    width: 100%;
    height: 50px;
    margin-top: 30px;
    border-bottom: 1px solid rgb(203, 203, 203);
    background-color: rgb(255, 255, 255);
    position: relative;
    color: #8a8a8a;
    display: flex;
    align-items: center;
}
</style>